/*
 * @Description:  饼状图及图案
 * @Author: Zzt
 * @Date: 2022-11-17 10:04:32
 * @LastEditTime: 2023-02-27 10:17:18
 */
import BasicPieChart from '@/components/echarts/BasicPieChart';
import { Col, Row, Select } from 'antd';
import classNames from 'classnames/bind';
import { useEffect, useState } from 'react';
import styles from '../styles/pieAndIcon.module.scss';
import { BookTwoTone, AppstoreTwoTone, UserOutlined, TeamOutlined } from '@ant-design/icons';
import { diskSize, archiveCount, fondsCount, userTotal } from '@/api/statistics/basicStatistics';
import { appState } from '@/store/mobx';
const cx = classNames.bind(styles);
const data = [
  { value: 6000, name: '已使用', selected: true },
  { value: 1548, name: '未使用' }
];
const PieAndIcon = () => {
  const [selectValue, setSelectValue] = useState('T');
  const [diskNum, setDiskNum] = useState<any>({});
  const [fondsNum, setFondsNum] = useState(0);
  const [archiveNum, setArchiveNum] = useState(0);
  const [utilize, setUtilize] = useState(0);
  const [admin, setAdmin] = useState(0);
  const [chartData, setChartData] = useState([]);
  const { unitId } = appState;

  useEffect(() => {
    // diskSize().then((res) => {
    //   // const { data } = res;
    //   // const { freeSpace, usedSpace } = data;
    //   // setDiskNum(data);
    //   // setChartData([
    //   //   { value: usedSpace, name: '已使用', selected: true },
    //   //   { value: freeSpace, name: '未使用' }
    //   // ]);
    // });
    archiveCount().then((res) => {
      const { count } = res.data;
      setArchiveNum(count);
    });
    fondsCount().then((res) => {
      const { count } = res.data;
      setFondsNum(count);
    });
    const params = { unitId };
    userTotal(params).then((res: any) => {
      const { utilizeTotal, adminTotal } = res.data;
      setUtilize(utilizeTotal);
      setAdmin(adminTotal);
    });
  }, []);
  return (
    <>
      <Row gutter={16}>
        <Col span={12}>
          <div className={cx('pie-num')}>
            <div>
              <BasicPieChart data={data} />
            </div>
            <div className={cx('pie-data')}>
              <p>
                磁盘总容量 {diskNum.totalSpace}({selectValue})
              </p>
              <p>
                磁盘已使用量{''}
                {diskNum.usedSpace}({selectValue})
              </p>
              <p>
                磁盘剩余量{''}
                {diskNum.freeSpace}({selectValue})
              </p>
            </div>
            <div className={cx('pie-select')}>
              单位：
              <Select
                defaultValue="T"
                // style={{ width: 120 }}
                bordered={false}
                onChange={(val) => setSelectValue(val)}
                options={[
                  {
                    value: 'T',
                    label: 'T'
                  },
                  {
                    value: 'GB',
                    label: 'GB'
                  },
                  {
                    value: 'MB',
                    label: 'MB'
                  }
                ]}
              />
            </div>
          </div>
        </Col>
        <Col span={12}>
          <div>
            <Row gutter={16}>
              <Col span={12}>
                <div className={cx('icon-num')}>
                  <div className={cx('icon-both')}>
                    <div className={cx('icon-icon')}>
                      <BookTwoTone />
                    </div>
                    <div className={cx('icon-text')}>
                      <div className={cx('num')}>{fondsNum}</div>
                      <div className={cx('text')}>全宗数量</div>
                    </div>
                  </div>
                </div>
              </Col>
              <Col span={12}>
                <div className={cx('icon-num')}>
                  <div className={cx('icon-both')}>
                    <div className={cx('icon-icon')}>
                      <AppstoreTwoTone twoToneColor={'#ffa012'} />
                    </div>
                    <div className={cx('icon-text')}>
                      <div className={cx('num')}>{archiveNum}</div>
                      <div className={cx('text')}>档案类型数量</div>
                    </div>
                  </div>
                </div>
              </Col>
            </Row>
          </div>
          <div>
            <Row gutter={16}>
              <Col span={12}>
                <div className={cx('icon-num')}>
                  {' '}
                  <div className={cx('icon-both')}>
                    <div className={cx('icon-icon')}>
                      <UserOutlined />
                    </div>
                    <div className={cx('icon-text')}>
                      <div className={cx('num')}>{admin}</div>
                      <div className={cx('text')}>管理用户数量</div>
                    </div>
                  </div>
                </div>
              </Col>
              <Col span={12}>
                <div className={cx('icon-num')}>
                  {' '}
                  <div className={cx('icon-both')}>
                    <div className={cx('icon-icon')}>
                      <TeamOutlined />
                    </div>
                    <div className={cx('icon-text')}>
                      <div className={cx('num')}>{utilize}</div>
                      <div className={cx('text')}>利用用户数量</div>
                    </div>
                  </div>
                </div>
              </Col>
            </Row>
          </div>
        </Col>
      </Row>
    </>
  );
};
export default PieAndIcon;
